<template>
  <div id="subpage" v-loading="loading">
    <el-col :span="24" class="warp-breadcrum">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <b>文章管理</b>
        </el-breadcrumb-item>
        <el-breadcrumb-item to="/article/index">文章管理</el-breadcrumb-item>
        <el-breadcrumb-item>添加文章</el-breadcrumb-item>
      </el-breadcrumb>
    </el-col>
    <div class="content">
      <div class="xcx-head">
        <span class="title">添加文章</span>
        <div style="display: flex">
          <el-button size="small" icon="el-icon-back" type="primary" @click="back()">返回</el-button>
        </div>
      </div>
      <div class="xcx-content">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="160px" style="width: 70%">
          <el-form-item label="分类：" prop="class_id">
            <el-col :span="16">
              <el-select filterable style="width: 400px;" v-model="ruleForm.class_id" placeholder="请选择">
                <el-option v-for="(item, index) in classData" :key="index" :label="item.title"
                  :value="item.id"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
          <el-form-item label="标题：" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入标题"></el-input>
          </el-form-item>
          <el-form-item label="发布者：">
            <el-col :span="10">
              <el-input v-model="ruleForm.author" placeholder="请输入发布者"></el-input>
            </el-col>
            <el-col :span="4" class="txt_center">浏览量：</el-col>
            <el-col :span="10">
              <el-input v-model="ruleForm.click" placeholder="请输入浏览量"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="活动时间" v-if="class_id == 2">
            <el-date-picker type="datetime" value-format="yyyy-MM-dd hh:mm:ss" placeholder="选择日期"
              v-model="ruleForm.active_time" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="跳转地址：">
            <el-input v-model="ruleForm.urls" placeholder="请输入微信公众号文章的访问地址"></el-input>
          </el-form-item>
          <el-form-item label="封面：" class="banner_img">
            <el-upload :action="adminApi.upload_url" name="image" list-type="picture-card"
              :on-preview="handleThumbPreview" :on-success="handleThumbSuccess" :on-remove="thumbRemove"
              :file-list="fileList0" :limit="1">
              <i class="el-icon-plus"></i>
            </el-upload>
            <p class="form-tip">建议尺寸 1420×580，或等比例缩放</p>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="首页推荐：">
            <el-radio-group v-model="ruleForm.is_index">
              <el-radio :label="1">推荐</el-radio>
              <el-radio :label="0">不推荐</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="详情：" prop="content">
            <vue-ueditor-wrap v-model="ruleForm.content" :config="config" ref="ueditor"></vue-ueditor-wrap>
          </el-form-item>
          <el-form-item class="mar_T_50">
            <el-button style="width: 120px;" icon="el-icon-thumb" type="primary" @click="submitForm()">保存</el-button>
            <el-button style="width: 120px;" icon="el-icon-back" type="info" @click="back()">返回</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import UploadOne from "../../components/upload/UploadOne";
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  components: {
    UploadOne,
  },
  data() {
    return {
      dialogVisible: false,
      loading: true,
      class_id: 0,
      dialogImageUrl: "",
      ruleForm: {
        title: "",
        class_id: "",
        author: "",
        content: "",
        click: 0,
        is_index: 0,
        thumb: "",
        urls: "",
      },
      classData: [],
      fileList0: [],
      id: "",
      rules: {
        title: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        content: [{ required: true, message: "请输入内容", trigger: "blur" }],
        class_id: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
      },
      config: {
        // 相对路径
        UEDITOR_HOME_URL: "/web_admin/UEditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度// 初始容器宽度
        initialFrameHeight: 300,
        initialFrameWidth: "99%",
        // 不显示字数
        // wordCount: false,
        enableAutoSave: true, //自动保存
      },
    };
  },
  /**
   * 进入页面加载
   */
  mounted() {
    var that = this;
    var query = that.$route.query;
    if (query.id) {
      that.id = query.id;
      that.class_id = query.class_id;
      that.getDetail();
    }
    that.getArticleClass();
  },
  methods: {


    handleThumbSuccess(res, file) {
      this.ruleForm.thumb = res.data.img_url;
    },
    thumbRemove(file, fileList) {
      this.ruleForm.thumb = "";
    },
    handleThumbPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    getArticleClass() {
      let that = this;
      that.axios.post("/article/getArticleClass").then((res) => {
        if (res) {
          that.classData = res.data;
          that.loading = false;
        }
      });
    },

    /**
     * 获取详情
     */
    getDetail() {
      var that = this;
      that.axios
        .post("/article/detail", {
          id: that.id,
        })
        .then((res) => {
          console.log(res);
          if (res) {
            that.ruleForm = res.data;
            if (res.data.thumb) {
              let thumb = [
                {
                  'name': "楼盘视频",
                  'url': res.data.thumb,
                }
              ];
              this.fileList0 = thumb;
            }
          }
          that.loading = false;
        });
    },

    submitForm() {
      const that = this;
      that.$refs.ruleForm.validate((valid) => {
        if (!valid) return that.$message.warning("请完整填写内容!");
        var formData = {};
        formData = that.ruleForm;
        var url = "/article/beforeSave";
        if (that.id) {
          formData.id = that.id;
        }
        that.axios.post(url, formData).then(() => {
          that.$message.success(that.id ? "修改成功" : "添加成功");
          //that.$router.push("/article/index");
          this.$router.push({
            path: "/article/index",
            query: {
              class_id: that.class_id,
            },
          });
        });
      });
    },
    /**
     * 返回
     */
    back() {
      this.$router.push("/article/index");
    },
  },
};
</script>
<style>
.edui-default {
  line-height: 20px;
}

.el-cascader-menu {
  overflow: hidden;
  width: 200px;
}

.el-scrollbar__wrap {
  overflow: auto;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
</style>